<template>
  <el-dialog
    title="选择加入购物车-型号"
    :visible.sync="dialogVisible"
    top="50px"
    width="350px">
    <el-form ref="form" label-width="60px" size="mini">
      <el-form-item label="商品:">
        <img :src="product.image" alt="" style="max-width: 100px; max-height: 100px;">
        <br>
        <span v-text="product.name"></span>
      </el-form-item>
      <el-form-item label="型号" v-if="currChooseList.length>0">
<!--        <el-radio-group-->
<!--          style="max-height: 200px; overflow-x: hidden; overflow-y: auto;"-->
<!--          v-model="currStockId"-->
<!--          @change="checkStock"-->
<!--        >-->
<!--          <el-radio-->
<!--            name="stockId"-->
<!--            v-for="(tmpModel,index) in product.stockList"-->
<!--            :key="index"-->
<!--            :label="tmpModel.id">-->
<!--            {{ tmpModel.model }}-->
<!--            <span style="color: #c03131; font-weight: bold" v-text="tmpModel.nums"></span>-->
<!--          </el-radio>-->
<!--        </el-radio-group>-->
        <div class="check-list">
          <div class="item" :class="{curr:item.currNums>0}" v-for="(item,index) in currChooseList" v-if="item.score===0">
            <div>
              <div style="display: inline-block; width: 150px; float: left">
                <el-tag type="success" effect="dark" class="name ovd_s" style="display: inline-block; width: auto; max-width: 150px;" size="small">
                  {{ item.model }}
                </el-tag>
              </div>
              <div class="nums">
                库存:
                <span v-text="item.nums"></span>
              </div>
              <div class="c"></div>
            </div>
            <div>
              <div class="price">
                价格: <span v-text="'￥'+ToMoney(item.price)"></span>
              </div>
              <div class="input">
                <el-input-number v-model="item.currNums" @change="calcNums" size="mini" :min="0"/>
              </div>
              <div class="c"></div>
            </div>
          </div>
          <div class="c"></div>
        </div>
      </el-form-item>
      <el-form-item label="合计">
        <div style="font-size: 13px; text-align: right;">
          总数量: <span v-text="currChoose.nums" class="b red"></span>
          总价格: <span v-text="'￥'+ToMoney(currChoose.price)" class="b red"></span>
        </div>
      </el-form-item>
<!--      <el-form-item label="价格:">-->
<!--        <span v-text="'￥'+ToMoney(currStock.price)" class="red"></span>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="团购价格:" v-if="currStock.groupPrice>0">-->
<!--        <span v-text="'￥'+ToMoney(currStock.groupPrice)" class="red"></span>-->
<!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" :disabled="(currChoose.nums)===0">加入购物车</el-button>
    </div>
  </el-dialog>

</template>

<script>
import CartTools from '../tools/CartTools'

export default {
  name: 'AddCartProductModelDialog',
  data: function () {
    return {
      callback: null,
      dialogVisible: false,
      currStockId:0,
      currChoose:{
        nums:0,
        price:0,
      },
      currChooseList:[
        {id:1,name:'规格A',currNums:0,nums:0,isChecked:false,price:40},
        {id:2,name:'规格B',currNums:0,nums:0,isChecked:false,price:50},
        {id:3,name:'规格C',currNums:0,nums:0,isChecked:false,price:20},
        {id:4,name:'规格D',currNums:0,nums:0,isChecked:false,price:100},
      ],
      product: {
        id: 0,
        name: '',
        image: this.NoImageUrl,
        shopId: 0,
        shopName: '',
        shopLogo: '',
        price: 0,
      }
    }
  },
  watch:{
    $route:function () {
      this.currChooseList=[]
      this.dialogVisible=false
      this.$forceUpdate()
    },
    dialogVisible:function () {
      if (!this.dialogVisible){
        this.currStockId=0
      }
    }
  },
  mounted () {
    let $this=this
    $this.bus.$on('AddCartProductModelDialogCallBus', function (productId, model) {
      if (!$this.CurrUser.IsLogin()){
        $this.$router.push('/Login')
      }
      // console.log('model',model)
      $this.product.id=productId
      $this.getProductDetail(function(){
        var currChooseList=[]
        $this.currChooseList.forEach(function (value, index) {
          if (!value.image){
            value.image=$this.product.image
          }
          $this.currChooseList[index].currNums=0
          if (value.model===model){
            $this.currChooseList[index].currNums=1
          }
          currChooseList.push(value)
        })
        $this.currChooseList=currChooseList
        $this.calcNums()
        $this.dialogVisible=true
        $this.$forceUpdate()
      })
    })
  },
  methods: {
    calcNums:function () {
      let $this=this
      $this.currChoose.nums=0
      $this.currChoose.price=0
      $this.currChooseList.forEach(function (value, index) {
        if (value.currNums>0){
          $this.currChoose.nums+=value.currNums
          $this.currChoose.price+=(value.currNums*value.price).toFixed(2)-0
          $this.currChoose.price=($this.currChoose.price).toFixed(2)-0
        }
      })
      $this.$forceUpdate()
    },
    getProductDetail: function (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'ShopProduct/productModeDetail', {
        id: $this.product.id,
      }, function (data) {
        $this.product.image=data.image
        $this.product.name=data.name
        $this.currChooseList=data.stockList
        callback()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 确认选择操作
    confirm: function () {
      let $this=this
      var arr=[]
      $this.currChooseList.forEach(function (value, index) {
        if (value.currNums>0){
          arr.push({
            id:value.id,
            nums:value.currNums,
          })
          /* CartTools.addProduct({
            id: value.shopProductId,
            name: value.shopProductName,
            image: value.image,
            shopId: value.shopId,
            shopName: value.shopName,
            shopLogo: value.shopLogo,
            nums: value.currNums,
            price: value.price,
            shopProductStockId: value.id,
            model: value.model,
          }) */
        }
      })
      $this.MyRequest($this.ApiDoNameMember + 'Member/setCartProductItemMore', {
        shopProductStockList: JSON.stringify(arr),
      }, function () {
        $this.dialogVisible = false
        $this.$message.success('添加成功')
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    }
  }
}
</script>

<style scoped>

</style>
